<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类管理</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="__PUBLIC__/Theme1/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="__PUBLIC__/Theme1/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="__PUBLIC__/Theme1/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="__PUBLIC__/Theme1/css/animate.min.css" rel="stylesheet">
    <link href="__PUBLIC__/Theme1/css/style.min.css?v=4.1.0" rel="stylesheet">
    <link href="__PUBLIC__/Plugin/style/css/common.css" type="text/css" rel="stylesheet">
    <link href="__PUBLIC__/Plugin/style/css/index.css" type="text/css" rel="stylesheet">

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>添加(修改)轮播图
                        <small></small>
                    </h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <form method="post" action="__URL__/addbanner" class="form-horizontal" enctype="multipart/form-data" onsubmit="return my_check();">
                        <input type="hidden" value="{$bannerList.id}" name="id">

                        <div class="form-group">
                            <label class="col-sm-2 control-label">跳转链接</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" name="url" id="url" required placeholder="请输入跳转链接" value="{$bannerList.url}">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">图片</label>
                            <div class="col-sm-3">
                                <div class="z_photo upimg-div clear" >
                                    <strong>点击图片删除</strong>
                                    <div id="preview" onclick="uploadpic()"></div>
                                    <if condition="($bannerList.pic_url neq '')">
                                        <div id='wxpic' onclick="uploadpic()">
                                            <img class="re" style="padding: 0px 0px 6px 0px;max-width:80px;max-height:80px;" src="__PUBLIC__{$bannerList.pic_url}"/>
                                            <input type="hidden" name="pic_url" value="{$bannerList.pic_url}">
                                        </div>
                                        <else/>
                                        <img class="re" style="padding: 0px 0px 6px 0px;max-width:200px;max-height:200px;" id="pic_url" name="pic_url" src=""/>
                                    </if>

                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label"></label>
                            <div class="col-sm-5">
                                <span class="btn btn-primary">上传</span>
                                <input type="file" style="width: 55px;position: relative;left: 0;z-index: 15;height: 35px;top: -30px;opacity: 0;float: none;"
                                       name="pic_url" value="" onchange="previewImage(this)">
                            </div>

                        </div>
                        
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-2">
                                <button class="btn btn-primary" type="submit">保存</button>
                                <a class="btn btn-white" href="{:U('Admin/Banner/index')}">返回</a>
                            </div>
                        </div>
                        <!--<input type="hidden" value="{$result.image}" id="images">-->
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="__PUBLIC__/Theme1/js/jquery.min.js?v=2.1.4"></script>
<script src="__PUBLIC__/Theme1/js/bootstrap.min.js?v=3.3.6"></script>
<script src="__PUBLIC__/Theme1/js/content.min.js?v=1.0.0"></script>
<script src="__PUBLIC__/Theme1/js/plugins/iCheck/icheck.min.js"></script>
<script src="__PUBLIC__/Plugin/style/js/imgUp.js"></script>
<script>
    $(document).ready(function () {
        $(".i-checks").iCheck({checkboxClass: "icheckbox_square-green", radioClass: "iradio_square-green",})
        var images = $("#images").val();
        var pic_arr = images.split(',');

        if (pic_arr.length > 1) {
            for (var i in pic_arr) {
                $('input[name="img[]"]').parent().append('<img src="__PUBLIC__' + pic_arr[i] + '" style="max-width:100px;height: 145px" class="img-thumbnail">');
            }
        }
    });

    function previewImage(file) {
        var prevDiv = document.getElementById('preview');
        if (file.files && file.files[0]) {
            var reader = new FileReader();
            reader.onload = function (evt) {
                prevDiv.innerHTML = '<img style="width: 200px;height: 200px" class="re" src="' + evt.target.result + '" />';
                $("#wxpic").next("input").remove();
                $("#wxpic").remove();
            }
            reader.readAsDataURL(file.files[0]);
        } else {
            prevDiv.innerHTML =
                '<div class="re" style="width: 200px;height: 200px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
            $("#wxpic").next("input").remove();
            $("#wxpic").remove();
        }
    }
    function uploadpic() {
        $("#wxpic").next("input").remove();
        $("#wxpic").remove();
        $(".re").attr("src", "");
        $(".re").attr("style", "display:none");
    };

    function my_check(){
        //商品分类名称不能重复


    }

</script>
</body>

</html>
